<template>
  <div class="home">
    <van-nav-bar
        title="注册"/>

    <van-form @submit="onSubmit">
      <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="telRule"
      />
      <van-field
          v-model="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="passwordRule"
      />
      <van-field
          v-model="checkCode"
          center
          clearable
          placeholder="请输入短信验证码"
          type="digit"
      >
        <template #button>
          <van-button
              type="primary"
              @click="sendSms"
              :disabled="disabled"
              native-type="button">
            {{ codeMsg }}
          </van-button>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button plain block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <div style="margin: 16px;">
      <van-button plain block type="primary" @click="returnHome">返回</van-button>
    </div>

  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: 'Register',
  data() {
    return {
      phone: '',
      checkCode: '',
      codeNum: 60,
      codeMsg: "获取短信验证码",
      disabled: false,
      password: '',
      telRule: [
        {
          required: true,
          message: "请输入手机号",
          trigger: "onBlur"
        },
        {
          validator: value => {
            return /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(value);
          },
          message: "请输入正确格式的11位手机号"
        }
      ],
      passwordRule: [
        {
          required: true,
          message: "请输入密码",
          trigger: "onBlur"
        },
        {
          validator: value => {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value);
          },
          message: "密码必须为6~20位数字+英文字母"
        }
      ],

    }
  },
  methods: {
    returnHome() {
      this.$router.push('/')
    },
    sendSms() {
      // 验证手机号格式是否正确
      if (!this.telRule[1].validator(this.phone)) {
        Toast('手机号格式不正确');
        return;
      }
      if (!this.passwordRule[1].validator(this.password)) {
        Toast('密码格式不正确');
        return;
      }
      // 验证手机号是否被注册axios
      this.$axios({
        method: 'get',
        url: 'http://localhost:8085/loginHandler/judgePhoneRegister/' + this.phone,
      }).then(res => {
        if (res.data.code === 500) {
          Toast("该号码已被注册！");
        } else if (res.data.code === 200) {
          // 按钮不可选中
          this.disabled = true;
          // 发送验证码axios
          this.$axios({
            method: 'get',
            url: 'http://localhost:8085/loginHandler/sendCheckCode/' + this.phone,
          }).then(res => {
            if (res.data.code === 200) {
              Toast("短信已发送，请注意接收！");
            }
          })
          // 倒计时
          let timer = setInterval(() => {
            --this.codeNum;
            this.codeMsg = `重新发送(${this.codeNum})`;
          }, 1000);

          // 倒计时结束后，恢复按钮
          setInterval(() => {
            clearInterval(timer);
            this.codeNum = 60;
            this.disabled = false;
            this.codeMsg = "获取短信验证码";
          }, 60000);
        }
      })
    },
    onSubmit() {
      // 发送验证码axios
      this.$axios({
        method: 'get',
        url: 'http://localhost:8085/loginHandler/register/' + this.phone + '/' + this.password + '/' + this.checkCode,
      }).then(res => {
        if (res.data.code === 200) {
          Toast("注册成功");
          this.$router.push('/')
        } else {
          Toast("注册失败");
        }
      })
    }

  }
}
</script>